import { Card, FormProps, Space, Table, TableProps, Tag } from "antd"

import {
  ExclamationCircleOutlined,
  PlusOutlined
} from '@ant-design/icons';
import { employeeItem, employeeParams } from "@/types/employee";
import { deleteEmployeeApi, getEmployeeListApi, updateStatusApi } from "@/api/employee";
import { Status } from "@/utils/enum";
import { message, modal } from "@/utils/AntdGlobal";
export const Component = () => {
  const columns: TableProps<employeeItem>['columns'] = [
    {
      title: '员工姓名',
      dataIndex: 'name',
      key: 'name',
      align: "center"
    },
    {
      title: '账号',
      dataIndex: 'username',
      key: 'username',
      align: "center"
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: "center"
    },
    {
      title: '账号状态',
      dataIndex: 'status',
      key: 'status',
      align: "center",
      render: (data: number) => {
        return <Tag color={Status[data].type}>{Status[data].name}</Tag>
      }
    },
    {
      title: '最后操作时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      align: "center"
    },
    {
      title: '操作',
      align: "center",
      render: (data: employeeItem) => {
        if (data.name === '管理员') {
          return (<Space size="middle">
            <a style={{ color: "#ccc" }}>修改</a>
            <a style={{ color: "#ccc" }}>删除</a>
            <a style={{ color: "#ccc" }}>停用</a>
          </Space >)
        } else {
          return (
            <Space size="middle">
              <a style={{ color: "#0e8b8d" }} onClick={() => editEmployee(data)}>修改</a>
              <a style={{ color: "red" }} onClick={() => deleteEmployee(data)}>删除</a>
              <a style={{ color: data.status ? "red" : "#0e8b8d" }} onClick={() => updateStatus(data)}>{data.status ? '禁用' : '启用'}</a>
            </Space >
          )
        }
      },
    },
  ];
  // 定义数据
  const [employeeList, setEmployeeList] = useState<employeeItem[]>([])
  // 定义总数
  const [total, setTotal] = useState(0)
  // 定义参数
  const [employeeQuery, setEmployeeQuery] = useState<employeeParams>({
    name: '',
    page: 1,
    pageSize: 10
  })
  // 修改页码
  const changePage = (page: number, pageSize: number) => {
    setEmployeeQuery({
      ...employeeQuery,
      page,
      pageSize,
    })
  }
  // 获取数据
  useEffect(() => {
    const getEmployeeList = async () => {
      // 发请求获取数据
      const res = await getEmployeeListApi(employeeQuery)
      const { data } = res
      setTotal(data.total)
      setEmployeeList(data.records)
    }
    getEmployeeList()
  }, [employeeQuery])
  type FieldType = {
    name?: string;
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    setEmployeeQuery({
      ...employeeQuery,
      name: values.name
    })
  };
  // 修改状态
  const updateStatus = (data: employeeItem) => {
    modal.confirm({
      title: data.status ? '禁用账号' : '启用账号',
      icon: <ExclamationCircleOutlined />,
      content: '确认调整该账号的状态?',
      okText: '确认',
      centered: true,
      cancelText: '取消',
      onOk: async () => {
        let status = data.status ? 0 : 1
        await updateStatusApi(data.id, status)
        message.success(`该账号${data.status ? '禁用成功' : '启用成功'}`)
        setEmployeeQuery({
          ...employeeQuery,
          page: 1,
          pageSize: 10,
          name: employeeQuery.name
        })
      }
    });
  }
  // 删除员工
  const deleteEmployee = (data: employeeItem) => {
    modal.confirm({
      title: '删除员工',
      icon: <ExclamationCircleOutlined />,
      content: '确认要删除该员工嘛?',
      centered: true,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        await deleteEmployeeApi(data.id)
        message.success('删除成功')
        setEmployeeQuery({
          ...employeeQuery,
          page: 1,
          pageSize: 10,
          name: employeeQuery.name
        })
      }
    });
  }
  const navigate = useNavigate();
  // 添加员工
  const addEmployee = () => {
    navigate("/employee/addEmployee")
  }
  // 修改员工
  const editEmployee = (data: employeeItem) => {
    navigate(`/employee/addEmployee?id=${data.id}`)
  }
  return (
    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
      {/* 查询 */}
      <Card className="mb-4">
        <div className="flex flex-justify-between">
          <Form
            name="basic"
            layout="inline"
            labelCol={{ span: 6 }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              label="员工姓名"
              name="name"
            >
              <Input placeholder="请输入员工姓名" allowClear />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
          <Button type="primary" icon={<PlusOutlined />} onClick={addEmployee}>
            添加员工
          </Button>
        </div>
      </Card>
      {/* 表格 */}
      <Card style={{ overflow: 'auto', height: 'calc(100% - 98px)' }}>
        <Table<employeeItem> rowKey="id" bordered dataSource={employeeList} columns={columns} pagination={
          {
            total: total,
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: (total) => `总数 ${total} 条`,
            position: ["bottomCenter"],
            onChange: (page, pageSize) => changePage(page, pageSize)
          }
        } />
      </Card>
    </div>
  )
}
